<template>
	<view class="nmview">
		<u-popup v-model="yanshow" mode="center" @close="yanclose" width="90%" :closeable="true" z-index="1000">
			<view class="mpop">

				<text class="yantit">
					输入验证码
				</text>
				<text class="youname">验证码已发送至{{email}}</text>
				<view class="yantan">
					<u-message-input @finish="finish" inactive-color="#111" active-color="#111111" width="75" :maxlength="6" font-size="46"></u-message-input>
				</view>
				<view class="yanfa" v-if="isTimer" @click="getcode">
					<text>重新发送({{time}}s)</text>
				</view>
				<view class="yanfa" v-else @click="getcode">
					<text>获取验证码</text>
				</view>
				<view class="querenben" :class="yanval!=''?'qbtns':''" @click="yanbtn">确认</view>
			</view>
		</u-popup>
	</view>
	
</template>

<script>
export default {
	props: {
		yanshow: {
			type: Boolean,
			default: false
		},
		cont:{
			type: String,
			default: ''
		},
		isTimer:{
			type: Boolean,
			default: false
		},
		time:{
			type: Number,
			default: 60
		},
		email:{
			type: String,
			default: ''
		},
	
	},
	name: "Nheader",
	data() {
		return {
			ispayPop: true,
			animat: this.isanimate(),
			huishow:false,
			tips: '',
			// refCode: null,
			seconds: 10,
			yanval:''
		};
	},
	methods: {
		getsou(){
			uni.showToast({
				title: '点击此处',
				icon: 'success'
			})
		},
		leftClick() {
			this.$emit("leftClick");
		},
		connectWallet(){
			
			this.$emit("connectWallet");
		},
		gettantwo(){
			this.$emit("gettantwo");
		},
		gethome(){
			uni.switchTab({ url: '/pages/tabbar/Tabhome' })
		},
		yanclose(){
			this.$emit("yanclose");
			// this.mshow  =false
		},
		finish(e){
			console.log(e)
			this.yanval = e
			
		},
		yanbtn(){
			console.log(this.yanval.length)
			if(Number(this.yanval.length)<6){
				this.$u.toast('请输入验证码');
				return false
			}
			this.$emit("yanclose");
			this.$emit("yanbtn",this.yanval);
		},
		getcode(){
			
			this.$emit("getcode");
		}

	}
}
</script>

<style scoped lang="scss">
.mpop{
	// padding: 50rpx 30rpx;
	// // #ifdef APP-PLUS
	// padding-top: calc(var(--status-bar-height) + 50rpx);;
	// // #endif
	background-color: #fff;
	padding: 40rpx;
	border-radius: 40rpx;
	.yantit{
		font-family: Source Han Sans CN;
		font-weight: bold;
		font-size: 43rpx;
		color: #000000;
		display: block;
		margin: 10rpx auto 20rpx;
		text-align: center;
	}
	.youname{
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 30rpx;
		color: #8B8B8B;
		display: block;
		text-align: center;
	}
	.yantan{
		margin: 50rpx 0 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.yanfa{
		display: flex;
		align-items: center;
		justify-content: flex-end;
		text{
			font-family: Source Han Sans CN;
			font-weight: 400;
			font-size: 26rpx;
			color: #BBBBBB;
		}
	}
	.querenben{
		height: 96rpx;
		background: #EBEBEB;
		border-radius: 48rpx;
		width: 80%;
		margin: 50rpx auto 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: Source Han Sans CN;
		font-weight: 500;
		font-size: 30rpx;
		color: #A5A5A5;
	}
	.qbtns{
		background: #000000;
		color: #fff;
	}
}
.nmview{
	/deep/.u-mode-center-box{
		background-color: transparent;
	}
}
</style>
